<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 95%;overflow-y: hidden">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 56px);padding-top: 2px;padding-right:10px;text-align: right">
          <a-button @click="togglescreen" style="height:18px;width:18px;padding: 0;border-width: 2px">&nbsp;&nbsp;</a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="Code" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
          <a-input placeholder="" v-decorator="[ 'code', validatorRules.code]" :readOnly="!!model.code"/>
        </a-form-item>

        <a-form-item label="Name" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input placeholder="" v-decorator="[ 'name', validatorRules.name]" />
        </a-form-item>

        <a-form-item label="Zookeeper Servers" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback >
          <a-input placeholder="" v-decorator="[ 'zookeeperServers', validatorRules.zookeeperServers]" />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import kafkamanagerApi from '@/api/kafkamanager'

  export default {
    name: "ClusterModal",
    data () {
      return {
        modalWidth:800,
        modaltoggleFlag:true,
        confirmDirty: false,
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
        validatorRules:{
          code:{rules: [{ required: true, message: 'Please enter cluster code!' }]},
          name:{rules: [{ required: true, message: 'Please enter cluster name!' }]},
          zookeeperServers:{rules: [{ required: true, message: 'Please enter zookeeperServers!' }]},
        },
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        headers:{},
        form:this.$form.createForm(this),
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}

    },
    computed:{
    },
    methods: {
      togglescreen(){
        if(this.modaltoggleFlag){
          this.modalWidth = window.innerWidth;
        }else{
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.visible = true;
        this.model = Object.assign({}, record);
        let filedsVal = pick(this.model,'code','name','zookeeperServers');
        this.$nextTick(() => {
          this.form.setFieldsValue(filedsVal);
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      moment,
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            kafkamanagerApi.saveCluster(formData).then((res)=>{
              that.$message.success('保存成功！');
              that.$emit('ok');
              that.close();
            }).catch(err => {
              this.$message.error(err.message);
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      handleConfirmBlur  (e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      }
    }
  }
</script>

<style scoped>
  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }
</style>